<template>
  <!-- 节点地图-->
  <div id="map" class="node-deploy-map-ctn"></div>
</template>

<script>
import { getNodeMap } from '@/api/cnap/situation.js'
import * as echarts from 'echarts'
import '@/static/js/map_china'

export default {
  name: 'NodeDeployMap',
  components: {},
  props: {},
  data() {
    return {
      chart: null, // echart数组
      nodeDeployMap: [], // echart数组
      effectIndex: -1, // 轮播状态
      interval: null, // 计时器
      // 调度平台地址
      plateNode: [
        {
          name: '南京市',
          value: ['118.8413', '32.34222', '调度平台', '运行中']
        }
      ],
      iconFocus: require('@/assets/imgs/situation/icon_scatter_focus.png')
    }
  },
  computed: {
    /**
     * @description: 数据处理
     * @description: 节点数据
     * @return {*}
     */
    scatterData() {
      return this.nodeDeployMap.map((item) => {
        return {
          name: item.clusterLocationCity,
          value: [
            item.longitude, // 经度
            item.latitude, // 纬度
            item.k8sClusterName,
            item.status
          ]
        }
      })
    },
    /**
     * @description: 数据处理
     * @description: 鼠标悬浮数据
     * @return {*}
     */
    effectScatterData() {
      if (this.effectIndex >= 0 && this.effectIndex < this.scatterData.length) {
        return this.scatterData.slice(this.effectIndex, this.effectIndex + 1)
      }
      return []
    }
  },
  watch: {},
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /**
     * @description: 地图启动
     * @description: 加载数据
     * @return {*}
     */
    initChart() {
      getNodeMap().then((res) => {
        // code==200是正常返回
        if (res.code === 200) {
          // 返回结果取值
          // 信息在res.data.data中
          this.nodeDeployMap = res.data
          if (!this.chart) {
            this.chart = echarts.init(document.getElementById('map'))
            // 鼠标悬浮事件
            this.chart.on('mouseover', (params) => {
              if (
                params.seriesType === 'scatter' &&
                params.event.target.shape
              ) {
                this.effectIndex = this.scatterData.findIndex((item) => {
                  return item.name === params.name
                })
                this.setChartOption()
                if (this.interval) {
                  clearInterval(this.interval)
                }
              }
            })
            // 鼠标离开事件
            this.chart.on('mouseout', (params) => {
              //   console.log('mouseout', params.seriesType, params.event.target)
              if (params.seriesType === 'effectScatter') {
                this.effectIndex = -1
                this.setChartOption()
                // this.setAutoPlay()
              }
            })
          }
          this.setChartOption()
        } else {
          this.$message.error(res.message)
        }
      })

      // this.setAutoPlay()
    },
    /* setAutoPlay() {
      if (this.interval) {
        clearInterval(this.interval)
      }
      this.interval = setInterval(() => {
        this.effectIndex = this.effectIndex + 1 >= this.scatterData.length ? 0 : this.effectIndex + 1
        this.setChartOption()
        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 1,
          dataIndex: 0
        })
      }, 5000)
    }, */
    setChartOption() {
      // 各个地区的坐标
      var geoCoordMap = {
        上海市: [121.4648, 31.2891], // 城市名
        东莞市: [113.8953, 22.901], // 城市名
        东营市: [118.7073, 37.5513], // 城市名
        中山市: [113.4229, 22.478], // 城市名
        临汾市: [111.4783, 36.1615], // 城市名
        临沂市: [118.3118, 35.2936], // 城市名
        丹东市: [124.541, 40.4242], // 城市名
        丽水市: [119.5642, 28.1854], // 城市名
        乌鲁木齐市: [87.9236, 43.5883], // 城市名
        佛山市: [112.8955, 23.1097], // 城市名
        保定市: [115.0488, 39.0948], // 城市名
        兰州市: [103.5901, 36.3043], // 城市名
        包头市: [110.3467, 41.4899], // 城市名
        北京市: [116.4551, 40.2539], // 城市名
        北海市: [109.314, 21.6211], // 城市名
        南京市: [118.8062, 31.9208], // 城市名
        南宁市: [108.479, 23.1152], // 城市名
        南昌市: [116.0046, 28.6633], // 城市名
        南通市: [121.1023, 32.1625], // 城市名
        厦门市: [118.1689, 24.6478], // 城市名
        台州市: [121.1353, 28.6688], // 城市名
        合肥市: [117.29, 32.0581], // 城市名
        呼和浩特市: [111.4124, 40.4901], // 城市名
        咸阳市: [108.4131, 34.8706], // 城市名
        哈尔滨市: [127.9688, 45.368], // 城市名
        唐山市: [118.4766, 39.6826], // 城市名
        嘉兴市: [120.9155, 30.6354], // 城市名
        大同市: [113.7854, 39.8035], // 城市名
        大连市: [122.2229, 39.4409], // 城市名
        天津市: [117.4219, 39.4189], // 城市名
        太原市: [112.3352, 37.9413], // 城市名
        威海市: [121.9482, 37.1393], // 城市名
        宁波市: [121.5967, 29.6466], // 城市名
        宝鸡市: [107.1826, 34.3433], // 城市名
        宿迁市: [118.5535, 33.7775], // 城市名
        常州市: [119.4543, 31.5582], // 城市名
        广州市: [113.5107, 23.2196], // 城市名
        廊坊市: [116.521, 39.0509], // 城市名
        延安市: [109.1052, 36.4252], // 城市名
        张家口市: [115.1477, 40.8527], // 城市名
        徐州市: [117.5208, 34.3268], // 城市名
        德州市: [116.6858, 37.2107], // 城市名
        惠州市: [114.6204, 23.1647], // 城市名
        成都市: [103.9526, 30.7617], // 城市名
        扬州市: [119.4653, 32.8162], // 城市名
        承德市: [117.5757, 41.4075], // 城市名
        拉萨市: [91.1865, 30.1465], // 城市名
        无锡市: [120.3442, 31.5527], // 城市名
        日照市: [119.2786, 35.5023], // 城市名
        昆明市: [102.9199, 25.4663], // 城市名
        杭州市: [119.5313, 29.8773], // 城市名
        枣庄市: [117.323, 34.8926], // 城市名
        柳州市: [109.3799, 24.9774], // 城市名
        株洲市: [113.5327, 27.0319], // 城市名
        武汉市: [114.3896, 30.6628], // 城市名
        汕头市: [117.1692, 23.3405], // 城市名
        江门市: [112.6318, 22.1484], // 城市名
        沈阳市: [123.1238, 42.1216], // 城市名
        沧州市: [116.8286, 38.2104], // 城市名
        河源市: [114.917, 23.9722], // 城市名
        泉州市: [118.3228, 25.1147], // 城市名
        泰安市: [117.0264, 36.0516], // 城市名
        泰州市: [120.0586, 32.5525], // 城市名
        济南市: [117.1582, 36.8701], // 城市名
        济宁市: [116.8286, 35.3375], // 城市名
        海口市: [110.3893, 19.8516], // 城市名
        淄博市: [118.0371, 36.6064], // 城市名
        淮安市: [118.927, 33.4039], // 城市名
        深圳市: [114.5435, 22.5439], // 城市名
        清远市: [112.9175, 24.3292], // 城市名
        温州市: [120.498, 27.8119], // 城市名
        渭南市: [109.7864, 35.0299], // 城市名
        湖州市: [119.8608, 30.7782], // 城市名
        湘潭市: [112.5439, 27.7075], // 城市名
        滨州市: [117.8174, 37.4963], // 城市名
        潍坊市: [119.0918, 36.524], // 城市名
        烟台市: [120.7397, 37.5128], // 城市名
        玉溪市: [101.9312, 23.8898], // 城市名
        珠海市: [113.7305, 22.1155], // 城市名
        盐城市: [120.2234, 33.5577], // 城市名
        盘锦市: [121.9482, 41.0449], // 城市名
        石家庄市: [114.4995, 38.1006], // 城市名
        福州市: [119.4543, 25.9222], // 城市名
        秦皇岛市: [119.2126, 40.0232], // 城市名
        绍兴市: [120.564, 29.7565], // 城市名
        聊城市: [115.9167, 36.4032], // 城市名
        肇庆市: [112.1265, 23.5822], // 城市名
        舟山市: [122.2559, 30.2234], // 城市名
        苏州市: [120.6519, 31.3989], // 城市名
        莱芜市: [117.6526, 36.2714], // 城市名
        菏泽市: [115.6201, 35.2057], // 城市名
        营口市: [122.4316, 40.4297], // 城市名
        葫芦岛市: [120.1575, 40.578], // 城市名
        衡水市: [115.8838, 37.7161], // 城市名
        衢州市: [118.6853, 28.8666], // 城市名
        西宁市: [101.4038, 36.8207], // 城市名
        西安市: [109.1162, 34.2004], // 城市名
        贵阳市: [106.6992, 26.7682], // 城市名
        连云港市: [119.1248, 34.552], // 城市名
        邢台市: [114.8071, 37.2821], // 城市名
        邯郸市: [114.4775, 36.535], // 城市名
        郑州市: [113.4668, 34.6234], // 城市名
        鄂尔多斯市: [108.9734, 39.2487], // 城市名
        重庆市: [107.7539, 30.1904], // 城市名
        金华市: [120.0037, 29.1028], // 城市名
        铜川市: [109.0393, 35.1947], // 城市名
        银川市: [106.3586, 38.1775], // 城市名
        镇江市: [119.4763, 31.9702], // 城市名
        长春市: [125.8154, 44.2584], // 城市名
        长沙市: [113.0823, 28.2568], // 城市名
        长治市: [112.8625, 36.4746], // 城市名
        阳泉市: [113.4778, 38.0951], // 城市名
        青岛市: [120.4651, 36.3373], // 城市名
        韶关市: [113.7964, 24.7028] // 城市名
      }
      // 用来数据导线
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = geoCoordMap['南京市'] // 数据线开始
          var toCoord = geoCoordMap[dataItem.name] // 数据线结束
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
                value: 22
              },
              {
                coord: toCoord
              }
            ])
          }
        }
        return res
      }
      // 设置地图参数
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          show: true
        },
        geo: {
          map: 'china',
          left: '40', // 位置调整
          right: '10', // 位置调整
          top: '20', // 位置调整
          bottom: '0', // 位置调整
          zoom: 1, // 当前视角的缩放比例
          roam: true, // 是否开启平游或缩放
          scaleLimit: {
            // 滚轮缩放的极限控制
            min: 1,
            max: 1.5
          },

          label: {
            show: false
          },
          itemStyle: {
            areaColor: 'rgba(3, 87, 154, 0.4)', // 区域颜色
            borderColor: '#03ECFF', // 边界颜色
            borderWidth: 1, // 边界宽度
            opacity: 0.8, // 透明度
            shadowBlur: 6,
            shadowColor: 'rgba(3, 236, 255, 0.5)' // 阴影颜色
          },
          silent: true
        },
        series: [
          {
            name: '部署详情',
            type: 'scatter', // 展示格式
            coordinateSystem: 'geo',
            data: this.scatterData,
            // symbol: 'circle',
            symbol: (value, params) => {
              return params.dataIndex === this.effectIndex ? 'none' : 'circle'
            },
            symbolSize: 11,
            encode: {
              value: 2
            },
            z: 3,
            animation: false,
            label: {
              show: true,
              position: 'bottom',
              distance: 5,
              formatter: '{b}',
              color: '#BDC1C8' // 颜色
            },
            itemStyle: {
              color: '#00EBFF', // 颜色
              borderColor: 'rgba(0, 255, 254, 0.5)', // 边界颜色
              borderWidth: 18, // 边界宽度
              shadowBlur: 4,
              shadowColor: 'rgba(0, 186, 255, 0.5)', // 阴影颜色
              opacity: 1 // 透明度
            },
            emphasis: {
              scale: false,
              label: {
                show: true
              },
              itemStyle: {
                color: '#00EBFF', // 颜色
                borderColor: 'rgba(0, 255, 254, 0.5)', // 边界颜色
                borderWidth: 18, // 边界宽度
                shadowBlur: 4, // 阴影
                shadowColor: 'rgba(0, 186, 255, 0.5)', // 阴影颜色
                opacity: 1 // 透明度
              }
            },
            tooltip: {
              show: false,
              backgroundColor: 'rgba(0,81,112, 0.9)', // 背景
              borderWidth: 1, // 边界宽度
              borderColor: 'rgba(3,217,255)', // 边界颜色
              textStyle: {
                color: '#0BBFFF' // 文字颜色
              },
              formatter: function(params, ticket, callback) {
                const xAxisLable =
                  '<div style="text-align:left;line-height:16px;">部署详情</div>'
                let content =
                  '<div style="line-height:16px;margin-top:6px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">部署区域</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.name +
                  '</span></div>'
                content =
                  content +
                  '<div style="line-height:16px;margin-top:3px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">节点名称</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.value[2] +
                  '</span></div>'
                content =
                  content +
                  '<div style="line-height:16px;margin-top:3px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">当前状态</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.value[3] +
                  '</span></div>'
                return (
                  '<div style="width: 130px;background:#0051701A;box-sizing: border-box;color:#005170;font-size:12px;">' +
                  xAxisLable +
                  content +
                  '</div>'
                )
              }
            }
          },
          {
            name: '调度平台',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.plateNode, // 数据源
            symbol: 'circle', // 样式
            symbolSize: 11,
            encode: {
              value: 2
            },
            z: 3,
            animation: false,
            label: {
              show: true,
              position: 'bottom', // 位置
              distance: 5,
              formatter: '{b}',
              color: 'yellow'
            },
            itemStyle: {
              color: 'rgba(247, 181, 0, 1)', // 颜色
              borderColor: 'rgba(247, 181, 0, 0.5)', // 边界颜色
              borderWidth: 18, // 边界宽带
              shadowBlur: 4, // 阴影
              shadowColor: 'rgba(247, 181, 0, 0.2)', // 阴影颜色
              opacity: 1 // 透明度
            },
            emphasis: {
              scale: false,
              label: {
                show: true
              },
              itemStyle: {
                color: 'rgba(247, 181, 0, 1)', // 颜色
                borderColor: 'rgba(247, 181, 0, 0.5)', // 边界颜色
                borderWidth: 18, // 边界宽度
                shadowBlur: 4, // 阴影
                shadowColor: 'rgba(247, 181, 0, 0.2)', // 阴影颜色
                opacity: 1 // 透明度
              }
            },
            tooltip: {
              show: false,
              backgroundColor: 'rgba(0,81,112, 0.9)', // 背景
              borderWidth: 1, // 边界
              borderColor: 'rgba(3,217,255)', // 边界颜色
              textStyle: {
                color: '#0BBFFF' // 字体颜色
              },
              formatter: function(params, ticket, callback) {
                const xAxisLable =
                  '<div style="text-align:left;line-height:16px;">部署详情</div>'
                let content =
                  '<div style="line-height:16px;margin-top:6px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">部署区域</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.name +
                  '</span></div>'
                content =
                  content +
                  '<div style="line-height:16px;margin-top:3px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">节点名称</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.value[2] +
                  '</span></div>'
                content =
                  content +
                  '<div style="line-height:16px;margin-top:3px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">当前状态</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.value[3] +
                  '</span></div>'
                return (
                  '<div style="width: 130px;background:#0051701A;box-sizing: border-box;color:#005170;font-size:12px;">' +
                  xAxisLable +
                  content +
                  '</div>'
                )
              }
            }
          },
          {
            name: '部署详情',
            type: 'effectScatter', // 悬浮样式
            coordinateSystem: 'geo',
            symbol: `image://${this.iconFocus}`, // 图标
            symbolSize: 29, // 圆大小
            encode: {
              value: 2
            },
            rippleEffect: {
              color: 'rgba(134, 254, 6, 0.35)', // 颜色
              scale: 2.5,
              period: 6,
              brushType: 'stroke'
            },
            z: 4,
            animation: false,
            label: {
              show: true,
              position: 'bottom', // 位置
              distance: 5,
              formatter: '{b}',
              color: '#BDC1C8' // 颜色
            },
            itemStyle: {
              // color: '#86FE06',
              // borderColor: 'rgba(134, 254, 6, 0.4)',
              // borderWidth: 18,
              shadowBlur: 4,
              shadowColor: '#333',
              opacity: 1
            },
            tooltip: {
              show: true,
              backgroundColor: 'rgba(0,81,112, 0.9)', // 背景
              borderWidth: 1, // 边界
              borderColor: 'rgba(3,217,255)', // 边界颜色
              textStyle: {
                color: '#0BBFFF' // 文字颜色
              },
              formatter: function(params, ticket, callback) {
                const xAxisLable =
                  '<div style="text-align:left;line-height:16px;">部署详情</div>'
                let content =
                  '<div style="line-height:16px;margin-top:6px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">部署区域</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.name +
                  '</span></div>'
                content =
                  content +
                  '<div style="line-height:16px;margin-top:3px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">节点名称</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.value[2] +
                  '</span></div>'
                content =
                  content +
                  '<div style="line-height:16px;margin-top:3px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">当前状态</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.value[3] +
                  '</span></div>'
                return (
                  '<div style="width: 130px;box-sizing: border-box;color:#0BBFFF;background:#0051701A;font-size:12px;">' +
                  xAxisLable +
                  content +
                  '</div>'
                )
              }
            },
            data: this.effectScatterData
          },
          {
            name: '平台详情',
            type: 'effectScatter',
            coordinateSystem: 'geo', //
            symbol: 'circle', // 样式
            symbolSize: 11, // 大小
            encode: {
              value: 2
            },
            z: 3,
            animation: false,
            label: {
              show: true,
              position: 'bottom', // 位置
              distance: 5,
              formatter: '{b}',
              color: 'rgba(247, 181, 0, 0.5)' // 颜色
            },
            itemStyle: {
              color: 'rgba(247, 181, 0, 1)', // 颜色
              borderColor: 'rgba(247, 181, 0, 0.5)', // 边界颜色
              borderWidth: 18, // 边界宽度
              shadowBlur: 4, // 阴影
              shadowColor: 'rgba(247, 181, 0, 0.2)', // 阴影颜色
              opacity: 1 // 透明度
            },
            tooltip: {
              show: true,
              backgroundColor: 'rgba(0,81,112, 0.9)', // 背景
              borderWidth: 1, // 边界宽度
              borderColor: 'rgba(3,217,255)', // 边界颜色
              textStyle: {
                color: '#0BBFFF' // 文字颜色
              },
              formatter: function(params, ticket, callback) {
                const xAxisLable =
                  '<div style="text-align:left;line-height:16px;">部署详情</div>'
                let content =
                  '<div style="line-height:16px;margin-top:6px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">部署区域</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.name +
                  '</span></div>'
                content =
                  content +
                  '<div style="line-height:16px;margin-top:3px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">节点名称</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.value[2] +
                  '</span></div>'
                content =
                  content +
                  '<div style="line-height:16px;margin-top:3px;display: flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items: center;-webkit-box-align: center;"><span style="color:#038ABA;">当前状态</span><span style="flex: 1;"></span><span style="font-weight: 600;">' +
                  params.value[3] +
                  '</span></div>'
                return (
                  '<div style="width: 130px;box-sizing: border-box;color:#0BBFFF;background:#0051701A;font-size:12px;">' +
                  xAxisLable +
                  content +
                  '</div>'
                )
              }
            },
            data: this.plateNode
          },
          {
            type: 'lines',
            coordinateSystem: 'geo',
            z: 99,
            zlevel: 2,
            effect: {
              show: true,
              period: 4, // 箭头指向速度，值越小速度越快
              trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: '#03F9FF',
                width: 1, // 尾迹线条宽度
                opacity: 1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              }
            },
            tooltip: {
              show: false
            },
            data: convertData(this.scatterData)
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../assets/css/common.less";

.node-deploy-map-ctn {
  width: 810px;
  height: 570px;
}
</style>
